Amiga Mag HDD Backup/Amiga Mag HDD Backup.zip/Amiga Mag HDD Backup/Alexander.img.bin/Alexander.img/***9.11 All NEWer important/Finch⁄5 Day Weather/Article.txt

Text File | 1994-09-16 | 14KB | 256 lines

Create An Animated Five-Day Weather Forecast With DeluxePaint IV


    Some time ago, I worked with our local NBC affiliate to
create weather graphics for its local newscast. They had an
Amiga 2000 and were using DeluxePaint for graphics production.
The main weather maps were downloaded from the AccuWeather
service; my job was to create specialized graphics. I created a
five-day forecast, a severe weather map, and several other custom
graphic screens. One of the things I worked on was an animated
five-day forecast. It was created entirely in DeluxePaint. In
this article, I will show you how to create this animated
forecast. In a future article, I will show you how to use HELM
to ease the process of building a five-day animated forecast on a
daily basis.

The Screen Layout
    Typically, a five-day forecast consists of a title at the
top of the screen, five graphic elements for each of the five
days, the names of the days, and a high and low temperature for
each day. I will follow this same convention. The major
difference is that instead of static graphics or color-cycled
graphics as is typical, I will be using animated graphics
complete with blinking sun, moving clouds, flashing lightning,
and falling rain.
    To start things off, a screen resolution and size needs to
be selected. Since the output will ultimately be used in a
television broadcast, the screen needs to be interlaced and
overscan. The resolution of TV is not that great (compared to
computer output, this is); therefore, a 16-color low resolution
screen should be sufficient. The lower resolution will also
ensure that the animated screen will run smoothly with no
jerkiness. A maximum overscan of 368x482 will be used to make
sure there is no border around the screen.
    Now the palette needs to be set. I used a blue background.
There is a yellow for text and lightning, some greens for the
grass, some blues for the sky, and so on. Figure 1 shows the
palette I selected.

The Building Blocks
    Once the selected screen resolution and palette are set,
the graphic elements to be used in the animated forecast need to
be created. There are many different types of days that can
occur: sunny, partly cloudy, rainy, stormy, snowy, haily, floody,
etc. For this article, I will discuss the first five.
    First, a basic screen design needs to be produced. Figure 2
shows the template I created. From the top down, it has the
title, a blank area for inserting the text indicating the days,
five boxes for inserting the AnimBrushes that will be created,
and color rectangles for inserting the high and low temperature
for each day. It is rather plain, but it gets the job done. You
can be as artistic as you like putting this template together.
    Now it is time to build the static graphic elements that
will be used to produce the forecast. Figures 3 and 4 show the
ones I created. The top row of Figure 3 shows the core graphics
that will be used in each AnimBrush. Each has a dithered green
ground and a solid blue sky. The graphic on the left has a light
blue sky and will be used for sunny days. The middle graphic has
a medium blue sky that will be used for partly cloudy days. The
graphic on the right has a dark blue sky that will be used for
overcast days. Each of these graphics is sized to fit inside the
hollow rectangular boxes in Figure 2. The graphics themselves
are each 50x183 pixels in size. The middle row of Figure 3 shows
five singular elements (cloud, lightning bolt, sun, raindrop, and
snowflake). The bottom row shows groupings of four of the
elements. These groupings will be used to create the
AnimBrushes. The three graphics at the top, the sun, and the four
element groupings at the bottom of the figure should each be
saved as separate brushes.
    Figure 4 shows seven different brushes, each containing the
names of five days of the week. Each brush starts with a
different day. These brushes were designed to fit inside the
blank area above the five empty boxes in Figure 1. Thus, for any
given day, the days of the week can be added by simply loading
the appropriate brush and pasting it in the appropriate location
on the template.

A Sunny Day
    Now it is time to create the first AnimBrush. Clear the
screen in DeluxePaint, load the brush containing the graphic with
the light blue sky, and then choose Color/Palette/Use Brush
Palette from the menu. This will set the screen palette to that
of the brush. Now paste the brush in the middle of the screen.
After some experimentation, I decided that a 10-frame animation
running at 10 frames per second looked quite good. So, from the
menu choose Anim/Frames/Set #, enter 10, and select OK. Also,
from the menu, choose Anim/Control/Set Rate and enter 10. This
will set the frame rate. At this point you will have a 10-frame
animation with each frame containing the pasted brush in the
middle of the screen.
    Load the sun brush and paste it down on the first frame in
the blank blue area away from the ground and sky graphic. Notice
that the sun is not symmetric. By rotating the brush 90 degrees,
a slightly different looking sun can be created for the next
frame of the animation. Choose the menu item Brush/Rotate/90
degrees. This will create a short wide sun due to the odd aspect
ratio of a 368x482 screen. To resize this alternate image of the
sun to better match the original image, choose the menu item
Brush/Size/Halve once and Brush/Size/Double Vert twice. Position
the resized brush over top of the original sun in frame one,
press the 2 key to jump to the second frame, and paste the
altered sun brush to the screen. By alternately pressing the 1
(previous frame) and the 2 (next frame) keys, you can see how
good the "blinking" sun looks. Redo these steps if necessary.
    Now it is time to add the sun to the light blue sky. Go to
frame one. Choose Anim/AnimBrush/Pick Up from the menu. Draw a
box around the sun, and when asked how many cels, type in 2. This
creates a two-frame AnimBrush of the sun. The frames are
slightly different from each other so it gives a slight motion to
the sun. To see how the blinking sun looks, hold down the 7 key.
This will cycle the AnimBrush frames. Save the AnimBrush by
selecting the Anim/AnimBrush/Save menu item. After saving,
position the sun AnimBrush in the light blue sky of the graphic
in the center of the screen on frame one. Paste the AnimBrush.
Press the M key (must be capital) to bring up the Move requester.
Make sure all of the settings are as shown in Figure 5 and press
the Draw button. This will cause the two-frame AnimBrush to be
pasted on each frame of the animation, alternating the two sun
images for consecutive frames. The result is a ten-frame
animation of a blinking sun in the light blue sky. To see how
the animation looks, press the 4 key. Pressing the Esc key will
stop the animation.
    Make sure frame one is displayed and select the
Anim/AnimBrush/Pick Up menu item. Draw a box around the ground
and sky graphic and type in 10 when asked how many cels. Click
on OK. A 10-frame AnimBrush containing the entire ground and sky
graphic with a blinking sun will be created. It should be saved
for later use.

A Partly Cloudy Day
    A partly cloudy day consists of a sun with some clouds.
Since the blinking sun AnimBrush has just been created, it can be
used as the base for this graphic. However, the sky needs to be
a medium blue. Therefore, there are two approaches that can be
used. First, the sky in all ten frames of the sunny day
animation can be filled with the medium blue color. Second, the
ground and medium blue sky graphic brush can be loaded and the
steps to create the sunny day AnimBrush repeated. Either way is
okay, but the first way is faster.
    Once a 10-frame animation of the ground and medium blue sky
with a blinking sun is in place, the moving clouds need to be
added. Load the five-cloud grouping brush. Notice that there are
two cloud layers in the grouping. The top layer has three clouds
and the bottom has two. The clouds in each layer are
purposefully offset from each other by 55 pixels. If the brush
is moved horizontally the 50 pixel width of the ground and sky
graphic over 10 frames (five pixels per frame), then frame one,
which will come after frame 10 (the animation loops), will look
identical to how frame 11 would have looked if it existed. This
allows the cloud movement to be smooth as the animation loops.
    So, let's do it. Paste the cloud grouping on the screen
such that the lower right-most cloud is centered horizontally in
the sky. Press M to bring up the Move requester. Select a value
of 50 for the X Distance and make sure the value of Count is 10.
Click on the Draw button. The clouds will be pasted to each
frame of the animation with a five-pixel offset between frames.
Pick up an AnimBrush consisting of the ground and sky graphic
area and save it. Now clear all frames of the animation and
paste the AnimBrush on frame 1. Use the Move requester to add it
to each frame in the same way the sun was added earlier (X
Distance set to zero). Play the animation. The clouds will move
across the sky. As the clouds disappear off to the right, new
clouds will appear from the left.

A Rainy Day
    For the rainy day graphic, no sun will be shown. Go to
frame one and clear all the frames by pressing the CLR button and
then selecting All Frames from the requester. Load the ground and
dark blue sky graphic and paste it on the first frame. Use the
Move requester to copy it to all frames. Next, create the moving
clouds just as was done for the partly cloudy day. Go to frame
one and load the raindrop grouping brush. Paste it on the screen
such that the upper left corner of the brush is in the upper left
corner of the sky, but such that the top raindrop is no higher
than the middle of the top cloud layer. Bring up the Move
requester. Set the X Distance to about 10, the Y Distance to
about -70 (remember Y increases upward in DeluxePaint), and Count
to 10. Click on the Preview button. Look closely at how the
raindrops appear as they fall towards the ground. Adjust the X
and Y Distances until they appear the way you want. Finally,
press the Draw button. Again, pick up the graphic as an AnimBrush
and save it. To make the rainfall appear harder, repeat the steps
for adding the raindrop grouping but begin the brush movement in
frame five or six. The movement will loop around to frame one
and continue until 10 frames have been drawn.

A Stormy Day
    The stormy day will be just like the rainy day but with some
lightning added. So, while on frame one of the rainy day
animation, load the lightning bolt grouping brush. All that is
needed is to add the lightning to various frames of the rainy day
animation so that the lightning appears to be flashing on and
off. I found that lightning bolts on frames 1, 2, 5, and 6 look
quite good. It gives the appearance of two quick flashes and then
a pause. Make sure the lightning bolts are in the same position
in each frame to which they are added. This is best done by
positioning the bolts at the appropriate location in the sky and
pressing the Left Alt-Left Amiga key combination (same as
pressing the left mouse button). Go to the next frame to which
the bolts will be added by pressing the 2 key to advance frames.
Paste the bolts with the same key combination. This method will
prevent the slight movement that can occur when trying to hold
the mouse steady.

A Snowy Day
    This one is quite simple now that the other ones have been
created. Simply create the moving clouds on a dark blue sky as
for the rainy day animation. Now, instead of adding falling
raindrops, simply add falling snowflakes using the snowflake
grouping brush.

Other Days
    What other type of days can you think of? Hail? How would
you portray it in the AnimBrush? Perhaps the snowfall will be
big. The ground could be changed to white for that one. There
are many different types of days that can be created. Play
around with it. Let your creative juices flow.

Putting It All Together
    Now that the AnimBrushes for the various type of days have
been created and saved (you did remember to save them all, didn't
you?), it is time to bring everything together for an actual
five-day forecast. Delete all the animation frames so there is
only the one DeluxePaint work screen. This can be done by setting
the number of frames to one. Load the five-day forecast template
(Figure 2). Then load the appropriate brush containing the names
of the five days to be forecast. Paste is under the title in the
appropriate position above the five empty boxes.
    Next, select the font and font size to use for the
temperatures. Type the low and high temperatures for each day in
the appropriate rectangles. Set the number of frames to 10; the
filled in template will be copied to all frames.
    Load the AnimBrush that represents the type of weather that
will prevail on the first day of the forecast. Paste it inside
the left-most box of frame one. Use the Move requester to paste
it to each frame of the animation. Do the same for the second
day, the third, and so on until all five days have AnimBrushes
associated with them.
    The animation is now complete. It can be saved as an Anim
file for use in a presentation package. Figure 6 shows frame two
of a sample I created. Figure 7 shows frame seven of the same
sample. I wish I could put the animation in the magazine, but
technology has not reached that point yet. You will just have to
put one together yourself. Or, if you prefer, you can write me
care of this magazine and I will send you a disk for a small fee.

Conclusions
    I hope you have had fun working through this tutorial. Using
DeluxePaint to build the final five-day forecast can be a bit
cumbersome since you must manually load the brushes and paste
them in the right location. Probably the most time consuming
task is typing in the temperatures. In a follow up article, I
will show you how to automate these tasks using HELM.
    If you put together something like this for a TV station, I
would like to know about it. See you next time.